<template>
    <div class="main">
        <div class="search-box" >
            <div class="f1"><span class="f-t">目录编号(Cat#)：</span> <el-input class="finput"  v-model="searchData.list_number" placeholder="请输入完整的产品目录号"></el-input></div>
            <div class="f1"><span class="f-t">产品批号(Lot#)：</span>  <el-input class="finput"  v-model="searchData.production_number" placeholder="请输入完整的产品目录号"></el-input></div>
            <div class="f2"> <el-button @click="getList" class="btn" type="primary" round icon="el-icon-search" :disabled="clickBtn"> 查询</el-button></div>
        </div>
        <div class="body" v-if="fullWidth > 1000 || showList">
            <div class="title">
                {{list.length == 0?'报告列表':'为您找到条'+list.length+'内容'}}
            </div>
            <div class="list">
                <div class="list-item" v-for="(item,index) in list" :key="index" @click="preview(item.id)">
                    <el-row justify="space-between" style="height:100%;width:100%">
                        <el-col :span="22" class="left-box" >
                            <div class="img-box">
                                <img src="../assets/images/pdf.png" alt="" class="w100">
                            </div>
                            <div class="content" >
                                <p class="c-1">{{item.production_name}}</p>
                                <p class="c-2">产品名称：{{item.original_name}}</p>
                                <p class="c-3">目录编号(Cat#) {{item.list_number}} <span v-if="fullWidth > 1000"> 产品批号：{{item.production_number}}</span></p>
                                <p v-if="fullWidth < 1000">  产品批号：{{item.production_number}}</p>
                            </div>
                        </el-col>
                        <el-col :span="2" class="right-box" >
                            <div class="downLoad" @click="downLoads(item.id)">

                            </div>
                            <span @click="downLoads(item.id)">下载</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="noMsg" v-if="dialogVisible">
                <img src="../assets/images/none.png" alt="" style='width:158px;height:158px;margin-bottom:30px;'>
                没有搜索到内容,请重新输入检索
            </div>
            
            <!-- <div class="more">
                加载更多
            </div> -->
        </div>
        <div class="QR-box" v-if="fullWidth < 1000 && showList == false">
            <div class="Qr-code">
                <img src="../assets/images/qd.png" alt="" style="width:100%;height:100%">
            </div>
            <p>如需咨询，请扫码联系TIANGEN在线客服</p>
        </div>
        <div class="block" style="text-align:center" >
            <el-pagination
                @current-change="handleCurrentChange"
                :page-size="5"
                layout="prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <div class="dialog" v-if="dialogVisible" @click="dialogVisible = false">
            <div class="inline-box">
                <img src="../assets/images/none.png" alt="" style='width:1.17rem;height:1.17rem;margin-bottom:0.3rem;'>
                 没有搜索到内容,请重新输入检索
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
           
            showList:false,
            fullWidth : document.documentElement.clientWidth,
            searchData:{
                page:1,	
                per_page:5,	
                list_number:'',
                production_number:''
            },
            dialogVisible:false,
            total:0,
            list:[]
        }
    },
    computed :{
        clickBtn () {
            if(this.searchData.production_number !='' && this.searchData.list_number !='' ){
                return false
            }else{
                return true;
            }
        }
    },
    created(){
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy: function () {
        window.removeEventListener('resize', this.handleResize)
    },
    methods: {
        handleResize (event) {
            this.fullWidth = document.documentElement.clientWidth
        },
        handleCurrentChange (val) {
            this.searchData.page =val;
            this.getList ();
        },
        async getList () {
            let res = await this.$api.get('/api/coa',{...this.searchData})
            this.total = res.total;
            this.list = [...res.data];
          
            if(res.data.length == 0){
                this.dialogVisible =true;
                this.showList = false;
            }else{
                 this.showList = true;
                  this.dialogVisible =false;
            }
        },
        downLoads (id) {
            window.open(this.$api.baseURL + "/api/coa/download/"+id)
        },
        async preview (id) {
            console.log(id);
            return;
            let res = await this.$api.get('/admin/coa/preview/'+id);
            console.log(res)
            
        },
          
        
    },
}
</script>
<style lang="scss" scoped>
   
    .w100{
        width:100%;
        height: 100%;;
    }
    .main{
        width: 100%;
        display: flex;
        flex-direction: column;
        .search-box{
            padding: 30px 0;
            box-sizing: border-box;
            font-size: 20px;
            height: 80px;
            align-items: center;
            display: flex;
            .f1{
                display: flex;
                align-items: center;
                width:500px;
                height: 100%;
                .finput{
                    width:260px;
                }
            }

        }
        .body{
            width: 100%;
            flex: 1;
            overflow: auto;
            .title{
                width: 100%;
                border-bottom: 1px solid #ccc;
                padding-bottom: 10px;
                color:#666;
            }
            .list{
                width: 100%;
                flex:1;
                .list-item{
                    width: 100%;
                    height: 150px;
                    padding:15px 0;
                    box-sizing: border-box;
                    border-bottom:1px solid #ccc;
                    cursor: pointer;
                    &:hover{
                            .right-box{
                                color: #999;
                                .downLoad{
                                    background-image: url('../assets/images/mx.png');
                                }
                            }
                            .left-box{
                                .content{
                                    .c-1{
                                        color:#871691;
                                    }
                                }
                            }
                          
                        }
                    .left-box{
                        display: flex;
                        align-items: center;
                        height: 100%;
                        .img-box{
                            width:40px;
                            height: 42px;
                           

                        }
                        .content{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            padding:20px 0;
                            box-sizing: border-box;
                            margin-left: 30px;
                            height: 100%;

                        }
                    }
                    .right-box{
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        color:#00984B;
                        font-size: 12px;
                        cursor: pointer;
                        .icon{
                           font-size:40px;
                           margin-bottom:10px;
                        }
                        
                        .downLoad{
                            width:26px;
                            height: 22px;;
                            background-image: url('../assets/images/mouse.png');
                            background-repeat: no-repeat; 
                            background-size: cover;
                            margin-bottom: 10px;
                        }
                    }
                }
            }
        }
        .block{
            display: block;
        }
        .noMsg{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top:150px;
            text-align: center;
           font-size:18px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color:#999;
            
        }
        .dialog{
            display: none;
        }
    }
@media screen and (max-width: 1000px) {
    .block{
        display: none;
    }
   .main{
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 0.12rem;
        .search-box{
            padding: .30rem 0;
            box-sizing: border-box;
            font-size: .3rem;
            min-height:4rem;
            font-weight: bold;
            justify-content: center;
            flex-wrap: wrap;
            .f1{
                display: flex;
                align-items: center;
                width:100%;
                height:.80rem;
                margin-bottom:0.2rem;;
                justify-content: center;
                .f-t{
                    margin-top:.2rem;
                }
                .finput{
                    width:54%;
                    height: .5rem;;
                }
            }
            .f2{
                margin-top:.2rem;
                .btn{
                    width:110px;
                    
                }
            }
        }
        .body{
            width: 100%;
            flex: 1;
            padding:0 0.3rem;
            box-sizing: border-box;
            .title{
                width: 100%;
                border-bottom: 1px solid #ccc;
                padding-bottom: .10rem;
                color:#666;
                font-size: .2rem;
            }
            .list{
                width: 100%;
                flex:1;
                overflow: auto;
                .list-item{
                    font-size: .18rem;
                    width: 100%;
                    height: 1.80rem;
                    padding:.15rem 0;
                    box-sizing: border-box;
                    border-bottom:1px solid #ccc;
                    .left-box{
                        display: flex;
                        align-items: center;
                        height: 100%;
                        .img-box{
                            width:.48rem;
                            height: .5rem;
                            

                        }
                        .content{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            padding:.20rem 0;
                            box-sizing: border-box;
                            margin-left: .3rem;
                            height: 100%;

                        }
                    }
                    .right-box{
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        .icon{
                           font-size:.40rem;
                           margin-bottom:.10rem;
                        }
                        &:hover{
                            color: #409EFF;
                        }
                    }
                }
               
            }
            .more{
                    width: 100%;
                    height: 0.8rem;;
                    font-size: .18rem;
                    text-align: center;
                    line-height: 0.8rem;
                    background: #ccc;
                    border-radius: 2px;
                    margin:.1rem 0 ;
                    display: block;
                }
           
        }
        .QR-box{
                .Qr-code{
                    width: 2.4rem;
                    height: 2.4rem;
                    border:1px solid #ccc;
                    padding:0.15rem;
                    margin:0 auto;
                    margin-bottom: .4rem;
                }
                p{
                    text-align: center;
                    font-size: 0.3rem;
                }
        }
        .noMsg{
            display: none;
        }
        .block {
            display: none;
        }
        .dialog{
            display: block;
            position: fixed;
            left:0;top:0;
            width:100%;
            height: 100%;
            z-index: 100000;
            background-color: rgba(0, 0, 0, 0.3);
            .inline-box{
                width:4.8rem;
                height: 3.7rem;;
                background-color: #fff;
                position: absolute;
                left:0;top:0;bottom:0;right: 0;
                margin:auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-radius: .1rem;
                text-align: center;
                font-size: .24rem;
                padding-top:0.42rem;
                color:#999999;
                box-sizing: border-box;
            }
        }
    }
}
</style>